<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>卖方-采购合同详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
<div id="app" v-cloak class="minWidth" style="padding: 15px;">
    <el-card shadow="never" style="margin-bottom: 12px;">
        <div slot="header" class="clearfix" style="display:flex; align-items:center; justify-content:space-between;">
            <span>卖方-采购合同详情</span>
            <div style="display:flex; align-items:center; gap:8px;">
                <el-button size="small" @click="handleBack">返回</el-button>
            </div>
        </div>

        <!-- 顶部统一求购单原信息 -->
        <div v-if="pageAcquisition" style="margin-bottom: 12px; background:#f9fafb; padding:10px; border-radius:4px;">
            <div style="font-weight: 600; color:#606266; margin-bottom: 6px;">求购单原信息</div>
            <el-descriptions :column="3" size="small" border>
                <el-descriptions-item>
                    <template slot="label">求购单编号</template>
                    <span>{{ pageAcquisition.Acquisition_Unit_Price_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">商品编号</template>
                    <span>{{ pageAcquisition.Article_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">供应总量</template>
                    <span>{{ pageAcquisition.Total_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">已售量</template>
                    <span>{{ pageAcquisition.Sales_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">起订量</template>
                    <span>{{ pageAcquisition.Start_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">步长</template>
                    <span>{{ pageAcquisition.Unit_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">单价</template>
                    <span>{{ pageAcquisition.Unit_Price }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">单位</template>
                    <span>{{ getUnitText(pageAcquisition.Article_Unit_SerialNumber) }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">联系人</template>
                    <span>{{ pageAcquisition.Contacts }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">联系电话</template>
                    <span>{{ pageAcquisition.Contacts_Phone }}</span>
                </el-descriptions-item>
                <el-descriptions-item :span="6">
                    <template slot="label">收货地址</template>
                    <span>{{ formatAddress(pageAcquisition) }}</span>
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <div v-if="list && list.length">
            <el-card v-for="row in list" :key="row.Acquisition_Order_SerialNumber" shadow="never" style="margin-bottom: 12px;">
                <div slot="header" class="clearfix">
                    <span>订单 {{ row.Acquisition_Order_SerialNumber }}</span>
                    <div style="float:right; display:flex; gap:6px; align-items:center;">
                        <el-tag :type="contractStatusTagType(row.Contract_Status)">{{ formatContractStatus(row.Contract_Status) }}</el-tag>
                    </div>
                </div>
                <el-descriptions :column="3" border size="small">
                    <el-descriptions-item>
                        <template slot="label">求购单编号</template>
                        <span>{{ row.Acquisition_Unit_Price_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">买方企业</template>
                        <span>{{ row.Enterprise_Info_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">交易数量</template>
                        <span>{{ row.Quantity }}{{ getUnitText(pageAcquisition && pageAcquisition.Article_Unit_SerialNumber) }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">支付方式</template>
                        <span>{{ row.Payment_Method_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">付款方式</template>
                        <span>{{ row.Trading_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">联系人</template>
                        <span>{{ row.Contacts }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">联系人电话</template>
                        <span>{{ row.Contacts_Phone }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">发货地址省编码</template>
                        <span>{{ row.ProvinceNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">发货地址市编码</template>
                        <span>{{ row.CityNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">发货地址区编码</template>
                        <span>{{ row.CountyNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                        <template slot="label">详细地址</template>
                        <span>{{ row.Detailed_Address }}</span>
                    </el-descriptions-item>
                </el-descriptions>

                <!-- 订单收付/发收汇总（来自 acquisition_order 字段） -->
                <div style="margin-top: 12px; background:#f5f7fa; padding:10px; border-radius:4px;">
                    <div style="font-weight:600;color:#606266;margin-bottom:8px;">订单收发汇总</div>
                    <el-table :data="getOrderSummary(row)" border size="small" style="width: 100%">
                        <el-table-column prop="label" label="项目" width="90"></el-table-column>
                        <el-table-column prop="plan" label="应收/应发" width="200">
                            <template slot-scope="scope">{{ scope.row.plan }}</template>
                        </el-table-column>
                        <el-table-column prop="done" label="已收/已发" width="200">
                            <template slot-scope="scope">{{ scope.row.done }}</template>
                        </el-table-column>
                        <el-table-column prop="remain" label="未收/未发" width="200">
                            <template slot-scope="scope">{{ scope.row.remain }}</template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 分次收款账单详情：仅展示当前订单对应报价的阶段收款计划 -->
                <div style="margin-top: 12px; background:#f5f7fa; padding:10px; border-radius:4px;">
                    <div style="font-weight:600;color:#606266;margin-bottom:8px;">阶段收款账单详情</div>
                    <el-table :data="row._stagePaymentsFixed || []" border size="small" style="width: 100%">
                        <el-table-column prop="stage" label="阶段" width="120"></el-table-column>
                        <el-table-column prop="percent" label="额度比" width="120">
                            <template slot-scope="scope">{{ (scope.row.percent===undefined||scope.row.percent===null||scope.row.percent==='') ? '' : (Number(scope.row.percent) + '%') }}</template>
                        </el-table-column>
                        <el-table-column prop="receivableAmount" label="应收款" width="120">
                            <template slot-scope="scope">{{ (scope.row.receivableAmount===undefined||scope.row.receivableAmount===null||scope.row.receivableAmount==='') ? '' : scope.row.receivableAmount }}</template>
                        </el-table-column>
                        <el-table-column prop="collectedAmount" label="已收款" width="120">
                            <template slot-scope="scope">{{ scope.row.collectedAmount===undefined||scope.row.collectedAmount===null ? 0 : scope.row.collectedAmount }}</template>
                        </el-table-column>
                        <el-table-column prop="uncollectedAmount" label="未收款" width="120">
                            <template slot-scope="scope">{{ scope.row.uncollectedAmount===undefined||scope.row.uncollectedAmount===null ? 0 : scope.row.uncollectedAmount }}</template>
                        </el-table-column>
                        <el-table-column prop="payWindow" label="收款周期" min-width="200">
                            <template slot-scope="scope">{{ (scope.row.payWindow===undefined||scope.row.payWindow===null) ? '' : scope.row.payWindow }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="240">
                            <template slot-scope="scope">
                                <!-- 卖方视图：仅显示收款、发货、开发票 -->
                                <el-button
                                    size="mini"
                                    type="success"
                                    @click="openReceiptDialog(row, scope.row)"
                                    :disabled="!canOperate(row) || !isContractConfirmed(row) || !actionEnabled(scope.row, 'receipt')">
                                    收款
                                </el-button>
                                <el-button
                                    v-if="scope.row && scope.row.stage === '发货'"
                                    size="mini"
                                    type="warning"
                                    @click="openShipDialog(row, scope.row)"
                                    :disabled="!canOperate(row) || !isContractConfirmed(row) || !actionEnabled(scope.row, 'ship')">
                                    发货
                                </el-button>
                                
                            </template>
                        </el-table-column>
                    </el-table>
                    <div v-if="!(row._stagePaymentsFixed && row._stagePaymentsFixed.length)" style="padding: 8px; color: #909399;">暂无阶段付款信息</div>
                </div>

                
                <div  style="margin-top: 12px; text-align:center;">
                    <el-button
                        type="success"
                        size="mini"
                        @click="confirmByB(row)"
                        :disabled="row.Contract_Status==='01' || row.Contract_Status==='11'"
                    >卖方确认合同</el-button>
            </el-card>
        </div>

        <div v-if="list.length > 1" style="margin-top: 10px; text-align:right;">
            <el-pagination
                    @current-change="handlePageChange"
                    :current-page="form.PageNumber"
                    :page-size="form.RowAmount"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </el-card>

    <!-- 收款详情弹窗：展示并填写实际收款金额-->
    <el-dialog title="收款详情" :visible.sync="dialogReceiptVisible" width="560px" :close-on-click-modal="true">
        <div v-if="receiptContext && receiptContext.order" style="margin-bottom: 12px; color:#606266; display:flex; gap:24px;">
            <span>合同总额：<b>{{ receiptContext.order.Amount }}</b>元</span>
            <span>本期应收额：<b>{{ receiptContext.stage && receiptContext.stage.receivableAmount }}</b>元</span>
        </div>
        <el-form :model="receiptForm" label-width="120px">
            <el-form-item label="实际收款金额">
                <el-input v-model.trim="receiptForm.amount" placeholder="请输入本次收款金额" style="width: 320px;">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="付款凭证">
                <div v-if="receiptView.vouchers && receiptView.vouchers.length" style="display:flex; gap:8px; flex-wrap:wrap;">
                    <img v-for="(u,idx) in receiptView.vouchers" :key="idx" :src="u" alt="付款凭证" style="width:120px;height:120px;object-fit:contain;border:1px solid #ebeef5;border-radius:4px;" />
                </div>
                <div v-else style="padding:8px;color:#909399;">暂无付款凭证</div>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmReceipt">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 填写物流弹窗（发货） -->
    <el-dialog title="填写物流" :visible.sync="dialogShipVisible" width="560px" :close-on-click-modal="false">
        <div v-if="shipContext && shipContext.order" style="margin-bottom: 8px; color:#000;">
            交易数量：<b>{{ shipContext.order.Quantity }}</b>{{ shipUnitText }}
        </div>
        <div v-if="shipContext && shipContext.order" style="margin-bottom: 8px; color:#000;">
            已发数量：<b>{{ shipDeliveredTotal }}</b>{{ shipUnitText }}
        </div>
        <el-form :model="shipForm" label-width="120px">
            <el-form-item label="物流公司">
                <el-select v-model="shipForm.logisticsCode" placeholder="请选择物流公司" filterable style="width: 320px;">
                    <el-option v-for="opt in logisticsOptions" :key="opt.Logistics_Code" :label="opt.Logistics_Name" :value="opt.Logistics_Code" />
                </el-select>
            </el-form-item>
            <el-form-item label="本次发货数量">
                <el-input v-model.trim="shipForm.deliveryQuantity" placeholder="请输入本次发货数量" style="width: 320px;">
                    <template slot="append">{{ shipUnitText }}</template>
                </el-input>
            </el-form-item>
            <el-form-item label="物流单号">
                <el-input v-model.trim="shipForm.logisticsNumber" placeholder="请输入物流单号" style="width: 320px;" />
            </el-form-item>
            <el-form-item label="上传凭证">
                <yl-upload v-model="shipForm.Picture_URL"></yl-upload>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogShipVisible=false" :disabled="shipSaving">取消</el-button>
            <el-button type="primary" :loading="shipSaving" @click="confirmShip">确定</el-button>
        </span>
    </el-dialog>

    

    

</div>

<script type="text/javascript" src="../../../utils/jquery.min.js"></script>
<script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
<script type="text/javascript" src="../../../utils/vue.min.js"></script>
<script type="text/javascript" src="../../../component/elementUI/index.js"></script>
<script type="text/javascript" src="../../../utils/utils.js"></script>
<script type="text/javascript" src="../../../utils/http.js"></script>
<script type="text/javascript" src="../../../utils/compressor.js"></script>
<script type="text/javascript" src="../../../utils/components.js"></script>
<script src="./js/seller_contract_details.js"></script>
</body>
</html>
